<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="我的收藏"></commonTitle>
			<!-- <view class="clear">清除</view> -->
		</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<ygc-refresh
				@onRefresh="refreshList()" 
				@scrolltolower="addList()"
				:pullupLoadingType="loadingType"
				
				>
				
				<uni-swipe-action>
					<uni-swipe-action-item v-if="collectionList.length ==0">
						<image src="../../static/common/nodata-sub.png" class="nodata"></image>
					</uni-swipe-action-item>
					<uni-swipe-action-item v-for="(item,index) in collectionList" :options="item.options" :key="index" @change="swipeChange" @click="swipeClick($event,index,item.collectId)">
						<!-- <text class="cont">{{item.content}}</text> -->
						
						<view class="goods-block" @tap="goodDetail(item.goods_id,item.promotion)">
							<!-- <view style="chose-box">
								<image src="../../static/common/chose-yes.png" class="close-img"></image>
							</view> -->
							<view class="goods-mainimg">
								<image class="goods-mainimg" :src="item.goods_image_url"></image>
							</view>
							<view class="goods-info">
								<view class="goods-name">{{item.goods_name}}</view>
								<view class="goods-price">
									<text class="money-tag">券后价￥</text>
									<text class="price">{{item.coupon_price}}</text>
									<text class="old-price">分享赚￥{{item.promotion}}</text>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
				
			</ygc-refresh>
		</view>
		
	</view>
</template>

<script>
	import commonTitle from'../../components/titile/title.vue'
	import ygcRefresh from '../../components/ygc-refresh/ygc-refresh.vue';
	import uniSwipeAction from '../../components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '../../components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default{
		components:{
			commonTitle,
			ygcRefresh,
			uniSwipeAction,
			uniSwipeActionItem
		},
		data () {
			return {
				apptoken:"",
				pageIndex:1,
				pageSize:10,
				loadingType: 'more',
				collectionList:[],
				loadMore:false,
			}
		},
		onLoad() {
			this.apptoken = uni.getStorageSync('apptoken');
			//请求收藏列表
			this.getCollectionList();
		},
		methods: {
			goodDetail(id,promotion){
				const _this = this;
				//查看商品详情
				uni.setStorage({
					key:"yongjin",
					data:promotion,
					success() {
						_this.$CommonJS.navigateTo('../goodDetail/good-detail?id='+id);
					}
				})
			},
			getCollectionList(type){
				//请求收藏列表
				const _this = this;
				console.log(this.pageIndex)
				if(type == "refresh"){
					//下拉刷新
					this.pageIndex = 1;
					this.loadMore = false;
				}
				if(!_this.loadMore){
					//当没有数据时，停止再次请求接口
					uni.request({
						url:this.$API.URL + this.$API.myCollection,
						data:{
							apptoken:this.apptoken,
							pageSize:10,
							pageIndex:this.pageIndex
						},
						success(res) {
							console.log(res)
							if(res.data.success){
								if(res.data.data.length>0){
									_this.pageIndex = _this.pageIndex+1;
									if(type == "refresh"){
										//清空
										_this.collectionList = [];
									}
									res.data.data.forEach(item =>{
										item.options=[{
											text: '删除',
											style: {
												backgroundColor: 'rgb(255,58,49)'
											}
										}];
										item.id = item.collectId;
										_this.collectionList.push(item);
									})
								}else{
									_this.$CommonJS.showToast("没有更多数据了");
									setTimeout(() => {
										_this.loadingType = '';
									}, 500);
									_this.loadMore = !_this.loadMore;
								}
								
							}else{
								
							}
							
						}
					})
				}
				
			},
			swipeChange(e) {
				console.log('返回：', e);
			},
			swipeClick(e, index,collectId) {
				const _this = this;
				let {
					content
				} = e
				if (content.text === '删除') {
					uni.request({
						url:this.$API.URL + this.$API.deleteCollection,
						data:{apptoken:this.apptoken,collectId:collectId},
						success(res) {
							console.log(res)
							if(res.data.success){
								_this.collectionList.splice(index, 1);
							}else{
								_this.$CommonJS.showToast(res.data.msg);
							}
						}
					})
				} 
			
			},
			/**
			 * 下拉刷新
			 */
			refreshList () {
			  console.log('下拉刷新');
				this.getCollectionList("refresh");
			},
			/**
			 * 上拉加载
			 */
			addList() {
				console.log('上拉加载');
				if(this.loadMore){
					return
				}
				this.loadingType = 'loading';
				this.getCollectionList();
			},
			//公告详情
			goMessageDetail(){
				this.$CommonJS.navigateTo('./messageDetail')
			}
			
		}
		
	}
</script>

<style>
	@import url("collection.css");
</style>
